<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <title>交易</title>
  <script src="/static/js/jquery-3.1.1.min.js"></script>
  <script src="/static/js/vue.min.js"></script>
  <script src="/static/js/pxToRem.js"></script>
  <link rel="stylesheet" href="/static/css/trade.css">
</head>
<body>
<div id="trade">
  <div class="trade_t">交易</div>
  <div class="trade_c">
    <ul class="trade_c_o">
      <li>
        <span v-text="jiben.flyl">9.00</span>
        <span>浮动盈利</span>
      </li>
      <li>
        <span v-text="jiben.zqy">9.00</span>
        <span>总权益</span>
      </li>
      <li>
        <span v-text="jiben.ccsz">9.00</span>
        <span>权利仓市值</span>
      </li>
      <li>
        <span v-text="jiben.djzj">9.00</span>
        <span>冻结资金</span>
      </li>
      <li>
        <span v-text="jiben.kyzj">9.00</span>
        <span>可用资金</span>
      </li>
      <li>
        <span v-text="jiben.ywcsz">9.00</span>
        <span>义务仓市值</span>
      </li>
    </ul>
    <ul class="trade_c_t">
      <li>下单</li>
      <li>当日委托</li>
      <li>当日成交</li>
      <li>查询</li>
    </ul>
    <div class="trade_c_r">
      <div class="trade_c_r_l">持仓</div>
      <div class="trade_c_r_r">一键平仓</div>
    </div>
    <ul class="trade_c_f">
      <li>合约名称</li>
      <li>持仓/可用</li>
      <li>均价/现价</li>
      <li>盈亏</li>
    </ul>
    <ul class="trade_c_i" v-for="chi in chicang">
      <li v-text="chi.hymc"></li>
      <li v-text="chi.ccky"></li>
      <li>
        <span v-text="chi.xjjj.split('/')[0]"></span>
        <span v-text="chi.xjjj.split('/')[1]"></span>
      </li>
      <li v-text="chi.yk"></li>
    </ul>
  </div>
  <ul class="trade_b">
    <li>
      <div class="trade_b_i"></div>
      <div class="trade_b_t">合约</div>
    </li>
    <li>
      <div class="trade_b_i"></div>
      <div class="trade_b_t">行情</div>
    </li>
    <li>
      <div class="trade_b_i"></div>
      <div class="trade_b_t">交易</div>
    </li>
    <li>
      <div class="trade_b_i"></div>
      <div class="trade_b_t">我的</div>
    </li>
  </ul>
</div>
<script>
  new Vue({
    el: '#trade',
    data: {
      baseUrl: 'http://192.168.1.4:8006',
      jiben: {},
      chicang: []
    },
    methods: {
      getList: function () {
        var _this = this
        $.ajax({
          url: _this.baseUrl + '/core/data/?type=cc',
          type: 'GET',
          success: function (resp) {
            if (resp.status === 'ok') {
              _this.jiben = {
                ccsz: resp.data.ccsz,
                flyl: resp.data.flyl,
                kyzj: resp.data.kyzj,
                ywcsz: resp.data.ywcsz,
                zqy: resp.data.zqy,
                djzj: resp.data.djzj
              }
              _this.chicang = resp.data.hdetail
              console.log(_this.jiben)
              console.log(_this.chicang)
            }
          }
        })
      }
    },
    mounted: function () {
      this.getList()
    }
  })
</script>
</body>
</html>
